<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Ajax.js"></script>
</head>

<body>
    <script>
        /* 
            回调地狱：

            建有5.1data1,5.2data2,5.3data3 三个文件
            现在想要获得data1的结果传给data2进行操作，然后再把操作后的结果传给打data3进行操作
            原始写法

  
        */

        // let x =Ajax({
        //     url:'../5.1data1.php',
        //     type:'get',
        //     success:function(res){
        //         console.log(res);
        //     }
        // });
        // 因为上面是异步，所以写执行log（x），而x还没有执行，所以得undifend
        // console.log(x);
        Ajax({
            url: '../5.1data1.php',
            type: 'get',
            success: function (res) {
                // 拿来了data1的数据，只能在这里才能拿得到，在外面拿不到（异步）
                // console.log(res);
                // 传给data2
                Ajax({
                    url: '../5.2data2.php',
                    // 把获得的data1数据当作参数传给data2
                    data: 'data1=' + res,
                    success: function (res1) {
                        // 获得data2操作后的数据
                        // console.log(res1);
                        // 传给data3进行操作
                        Ajax({
                            url: '../5.3data3.php',
                            // 把data2的结果当做参数传给data3
                            data: {
                                data2: res1
                            },
                            success: function (res2) {
                                // 获得data3操作后的结果
                                console.log(res2);
                            }
                        });
                    }
                });
            }
        });
        /* 
            以上 ，因为回调函数嵌套里面在嵌套，导致会嵌套了好多层，这样就称作 回调地狱
            回调地狱会导致 代码不雅观，更系迭代的比较麻烦

            解决回调地狱的方法 就是用同步代码的写法，去执行异步代码
            
            这时候会用到一个 Promise 对象
            大概就是把需要执行异步代码的时候，把异步代码交给Promise
            Promise会帮你执行，并且把结果返回给你

            let p =new Promise();
            ***Promise（参数1） 参数1 必须是个 函数，Promise里面必须有个参数，并且这个参数一定是个函数
            ***参数1 === 函数(参数resolve，参数reject){}   函数也必须要有两个参数  参数resolve == 请求成功后执行的函数  参数reject === 请求失败后执行的函数

            获取Promise执行后的结果
            p.then(参数1) 参数1 === 函数，当请求成功后，执行success函数， 当执行success里面的resolve函数的时候，就相当于调用then();
            p.catch()，当请求失败的时候，就会执行Error函数，当执行Error里面的reject函数的时候，就相当于调用catch(); 
            ***当有多个请求的时候，catch()也是只写一个，并且写在最后，  
            // 有几个请求 那么久需要几个then 来获取对应的结果
            // 到那时catch 只需要一个 ，在所有的then结束的后面添加一个catch
            // 无论是第几个请求出错，那么都会执行catch
            下面这种虽然说没有那么多回调函数嵌套，但是所有的代码嵌套在 p.then()方法中，还需优化
        */
        let p = new Promise(function (resolve, reject) {
            Ajax({
                url: '../5.1data1.php',
                success: function (res) {
                    // 把拿到的data1当做参数用resolve调用
                    // 当resolve调用的时候，相当于调用then()
                    resolve(res);
                }
            });
        });
        p.then(function (nres) {
            // nres == res 因为是异步，所以也只能在里面才获得结果 ，在外面获取不到
            // console.log(nres);
            let p1 = new Promise(function (resolve, reject) {
                Ajax({
                    url: '../5.2data2.php',
                    data: {
                        // 把data1的结果当做参数给data2进行操作
                        data1: nres,
                    },
                    success: function (res1) {
                        // 获得的data2操作后的结果
                        // 当resolve调用的时候，相当于调用then()
                        resolve(res1);
                    },
                });
            });
            p1.then(function (nres1) {
                // console.log(nres1);
                let p2 = new Promise(function (resolve, reject) {
                    Ajax({
                        url: '../5.3data3.php',
                        data: {
                            data2: nres1
                        },
                        success: function (res2) {
                            resolve(res2);
                        },
                    });

                });
                p2.then(function (nres2) {
                    console.log(nres2);
                });
            });

        }).catch(function(err){
            console.log(err);
        });
    </script>
</body>

</html>